{extend name="/main"}
{block name="body"}
<fieldset class="layui-bg-gray layui-elem-fieldset">
    <legend>条件搜索</legend>
    <form class="layui-form layui-form-pane form-search" onsubmit="return false" autocomplete="off">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-inline">
                <input name="title" id="title" value="" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <button type="button" id="search_btn" class="layui-btn layui-btn-primary" data-type="reload"><i class="layui-icon layui-icon-search"></i></button>
        </div>
    </form>
</fieldset>
<table class="layui-hide" id="table-demo" lay-filter="table-filter" lay-skin="nob"></table>
<script type="text/html" id="toolbar-demo">
    <a class="layui-btn layui-btn-xs layui-btn-primary" title="新增" lay-event="create">
        <i class="layui-icon layui-icon-add-1"></i>
    </a>
</script>
<script type="text/html" id="tool-demo">
    <i class="layui-icon layui-icon-auz" title="授权" lay-event="authorization"></i>&nbsp;
    <i class="layui-icon layui-icon-edit" title="编辑" lay-event="edit"></i>&nbsp;
    <i class="layui-icon layui-icon-delete" title="删除" lay-event="destroy"></i>
</script>
{/block}
{block name="script"}
<script>
    layui.use(['table', 'form', 'laydate'], function(){
        var table = layui.table;
        layui.form.render();
        $('.datetime').each(function(){
            layui.laydate.render({elem:this, trigger:"click"});
        });

        table.render({
            elem:"#table-demo",
            url:"{$uri}/show",
            method:"get",
            page:true,
            toolbar: '#toolbar-demo',
            defaultToolbar:['filter', 'print', 'exports'],
            request:{
                pageName:"page",
                limitName:"limit"
            },
            response:{
                countName:"total",
                dataName:"data"
            },
            cols:[[
                {type: 'checkbox', fixed: 'left'},
                {field:"id", title:"ID", width:100, align:'center'},
                {field:"title", title:"角色名称", align:'center'},
                {field:"created_at", title:"创建时间", align:'center'},
                {field:"updated_at", title:"更新时间", align:'center'},
                {fixed: 'right', title:'操作', align:'center', toolbar: '#tool-demo'}
            ]],
            done:function(response, curr, count){
                // console.log(response);
            }
        });

        // 监听事件
        table.on('tool(table-filter)', function (obj){
            // 获取选中的数据
            // console.log(obj); //当前行的一些常用操作集合
            // console.log(obj.checked); //当前是否选中状态
            // console.log(obj.data); //选中行的相关数据
            // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            // console.log(obj.event);
            let data = obj.data;
            switch (obj.event){
                case 'edit':
                    active[obj.event].call(this, data.id);
                    break;
                case 'destroy':
                    active[obj.event].call(this, data.id);
                    break;
                case 'authorization':
                    active[obj.event].call(this, data.id);
                    break;
            }
        });
        table.on('toolbar(table-filter)', function(obj){
            let data = obj.data;
            switch(obj.event){
                case 'create':
                    active[obj.event].call(this);
                    break;
            }
        });

        var wheres = {};
        var active = {
            reload:function(){
                table.reload("table-demo", {page: {curr:1}, where: wheres});
            },
            create: function(){
                let uri = "{$uri}/create";
                layer.open({
                    type: 2,
                    title: '添加',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['30%', '40%'],
                    content: uri,
                });
            },
            edit: function(id){
                // console.log(sn);
                let uri = "{$uri}/edit?id=" + id
                layer.open({
                    type: 2,
                    title: '编辑',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['30%', '40%'],
                    content: uri,
                });
            },
            destroy:function(id){
                layer.confirm('确定删除?', function(index){
                    $.ajax({
                        url: "{$uri}/destroy",
                        method: "delete",
                        data: {id: id},
                        dataType: "JSON",
                        success: function (callback){
                            // console.log(callback);
                            layer.msg(callback.message);
                            if (callback.code === 1)
                            {
                                setTimeout(function(){
                                    window.parent.location.reload();
                                }, 1000);
                            }
                        },
                        error: function (callback){
                            // console.log(callback);
                            layer.msg(callback.message);
                        }
                    });

                    layer.close(index);
                });
            },
            authorization:function(id){
                let uri = "{$uri2}/index?admin_role_id=" + id
                layer.open({
                    type: 2,
                    title: '',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['50%', '90%'],
                    content: uri,
                });
            }
        };

        $("#search_btn").on('click', function(){
            wheres = {};
            let title_val = $("#title").val().trim();
            if (title_val.length > 0) wheres.title = title_val;
            active['reload'].call(this);
        });
    });
</script>
{/block}